import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';
import { Form, Input } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  onChange?: Function,
  initCurrent: Function,
  new: boolean,
  cond?: any
}

const FormItem = Form.Item;

@connect(({ position_patrol_user }) => ({
  cond: position_patrol_user.cond || {}
}))
class Search extends Component<Props, any> {

  componentDidMount() {
    setTimeout(() => {
      const { cond, form } = this.props;
      const { pageNum, pageSize, ...searchParams } = cond;
      form.setFieldsValue(searchParams);
    }, 20)
  }

  search = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'position_patrol_user/updateCond',
          payload: {
            ...values
          }
        });
        this.props.initCurrent()
      }
    });
  };

  patrolSetDown = () => {
    this.props.onChange();
  };

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0} span={4}>
            <FormItem
              label="工号"
              {...formItemLayout}
            >
              {getFieldDecorator('jobNumber', {
                rules: [{ message: '输入工号' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入工号" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={4}>
            <FormItem
              label="登录名"
              {...formItemLayout}
            >
              {getFieldDecorator('loginName', {
                rules: [{ message: '输入登录名' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入登录名" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={4}>
            <FormItem
              label="姓名"
              {...formItemLayout}
            >
              {getFieldDecorator('realName', {
                rules: [{ message: '输入姓名' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入姓名" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={3} span={4}>
            <FormItem
              label="手机号"
              {...formItemLayout}
            >
              {getFieldDecorator('mobile', {
                rules: [{ message: '输入手机号' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入手机号" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={4} span={8}>
            <SearchRow type="flex" justify="end">
              <SearchButton icon='search' htmlType="submit">搜索</SearchButton>
              <SearchButton
                icon='redo'
                onClick={(e) => {
                  this.props.form.resetFields();
                  this.search(e)
                }} style={{ 'marginLeft': '10px' }}>重置</SearchButton>
                         <SearchButton
                icon="minus"
                style={{ 'marginLeft': '10px' }}
                onClick={() => {
                  this.patrolSetDown()
                }}
                type="primary"
              >移除人员
              </SearchButton>
              <Link to='/data/patrol_user'><SearchButton icon='plus' type="primary" style={{ 'marginLeft': '10px' }}>新增人员</SearchButton></Link>
     
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
